<template>
	<div class="homeSwiper">
		<h1 class="pageTitle">首页轮播图</h1>
		<div class="headerButton">
			<el-button type="primary" class="addSwiper" @click="openAddDialog">新增轮播图</el-button>
			<el-select v-model="swiperPosition" placeholder="请选择" style="float: right;">
			    <el-option
			      v-for="item in swiperSelect"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</div>
		<div class="homeSwiperTable" style="min-width: 1200px">
			<el-table :data="homeSwiperTableData">
				<el-table-column label="图片" width="250">
					<template slot-scope="scope">
						<img :src="scope.row.img_url" style="width: 100px;"/>
					</template>
				</el-table-column>
				<el-table-column label="排序" width="180" type="index">
				</el-table-column>
				<el-table-column prop="href" label="链接">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button class="addSwiper" @click="upSwiperData(scope.row.orders)">上升</el-button>
						<el-button class="addSwiper" @click="downSwiperData(scope.row.orders)">下降</el-button>
						<el-button type="danger" @click="deleteSwiper(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="addSwiperDialog">
			<el-dialog title="添加轮播图" :visible.sync="dialogFormVisible">
				<el-form ref="form" :model="form" :rules="rules">
					<el-form-item label="上传图片" :label-width="formLabelWidth" prop="imgUrl" style="text-align: left;">
						<uploadImg @toparent="getImgUrl" :clearImgList="isClearImgList"></uploadImg>
					</el-form-item>
					<el-form-item label="轮播图位置" :label-width="formLabelWidth" prop="position_id" style="text-align: left;">
						<el-radio v-model="form.position_id" label="1">首页顶部</el-radio>
  						<el-radio v-model="form.position_id" label="2">首页底部</el-radio>
					</el-form-item>
					<el-form-item label="链接地址" :label-width="formLabelWidth" prop="href">
						<el-input v-model="form.href" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addSwiper('form')">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import config from '@/assets/js/config.js'
	import uploadImg from '@/components/uploadImg.vue'
	export default {
		components:{
			uploadImg
		},
		data(){
			return {
				swiperSelect:[{
		          value: 1,
		          label: '首页头部'
		        }, {
		          value: 2,
		          label: '首页底部'
		        }],
		        swiperPosition: 1,
		        homeSwiperTableData:[],
		        dialogTableVisible: false,
		        dialogFormVisible: false,
		        form: {
		        	imgUrl:"",
		          	position_id: '1',
		         	href: ''
		        },
		        formLabelWidth: '120px',
		        rules:{
		        	imgUrl:[
		        		{ required: true, message: '请上传图片', trigger: 'blur' }
		        	],
		       		position_id: [
			            { required: true, message: '请输入新闻标题', trigger: 'blur' }  
			        ],
			        href: [
			        	{ required: true, message: '请输入链接地址', trigger: 'blur' }
			        ]
				},
				isClearImgList:false
			}
		},
		created(){
			this.$require.get(config.carousel,{
				params:{
					position_id:1
				}
			}).then((res)=>{
				console.log(res);
				this.homeSwiperTableData = res.data.data.rows;
			})
		},
		methods:{
			openAddDialog(){
				this.isClearImgList = false;
				this.dialogFormVisible = true;
			},
			//获取上传图片的地址
			getImgUrl(res){
				console.log(res);
				this.form.imgUrl = res;
				console.log(this.form.imgUrl);
			},
			//增加数据
			addSwiper(formName){
				this.$refs[formName].validate((valid) => {
		          	if (valid) {
		          		console.log(this.form);
		          		this.$submit.post(config.addCarousel,{
							href: this.form.href,
							img_url: this.form.imgUrl,
							order: 0,
							position_id: this.form.position_id
						}).then((res)=>{
							console.log("增加成功");
							this.$require.get(config.carousel,{
								params:{
									position_id: this.form.position_id
								}
							}).then((result)=>{
								console.log(result);
								this.homeSwiperTableData = result.data.data.rows;
								this.$message('轮播图增加成功');
							})
							this.dialogFormVisible = false;
							this.form.imgUrl = '';
							this.form.href = '';
							this.isClearImgList = true;
						})
		          	}else{
		            	console.log('error submit!!');
		            	return false;
		          	}
		     	});
			},
			//删除数据
			deleteSwiper(idx){
				console.log(idx);
				this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        type: 'warning'
		        }).then(() => {
		        	//提交删除请求
		        	this.$submit.post(config.deleteCarousel,{
						id:idx
					}).then((res)=>{
						console.log("删除成功");
						this.$require.get(config.carousel,{
							params:{
								position_id: this.swiperPosition
							}
						}).then((result)=>{
							this.$message({
					            type: 'success',
					            message: '删除成功!'
				        	});
							this.homeSwiperTableData = result.data.data.rows;
						})
					})
		        }).catch(() => {
		          	this.$message({
		            	type: 'info',
		            	message: '已取消删除'
		          	});    
		        });
			},
			//上移数据
			upSwiperData(idx){
				this.$submit.post(config.sortCarousel,{
					move: 1,
					orders: idx
				}).then((res)=>{
					console.log(res);
					this.$require.get(config.carousel,{
						params:{
							position_id: this.swiperPosition
						}
					}).then((result)=>{
						this.$message({
				            type: 'success',
				            message: '上升成功!'
			        	});
						this.homeSwiperTableData = result.data.data.rows;
					})
				})
			},
			//下移数据
			downSwiperData(idx){
				console.log(idx);
				this.$submit.post(config.sortCarousel,{
					move: -1,
					orders: idx
				}).then((res)=>{
					this.$require.get(config.carousel,{
						params:{
							position_id: this.swiperPosition
						}
					}).then((result)=>{
						this.$message({
				            type: 'success',
				            message: '下降成功!'
			        	});
						this.homeSwiperTableData = result.data.data.rows;
					})
				})
			}
			
		},
		watch:{
			swiperPosition:function(){
				this.$require.get(config.carousel,{
					params:{
						position_id: this.swiperPosition
					}
				}).then((result)=>{
					console.log(result);
					this.homeSwiperTableData = result.data.data.rows;
				})
			}
		}
	}
</script>

<style lang="scss">
.homeSwiper{
	height: 100%;
	overflow: auto;
	padding: 20px 30px;
	.pageTitle{
		font-size: 30px!important;
	}
	.headerButton{
		margin: 20px 0;
		overflow: hidden;
	}
	.el-form-item__label{
		text-align: left;
	}
}
	
</style>